<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输权限名称" clearable @clear="search" v-model="pname" >
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addPermissionFormVisible=true">添加权限</el-button>
        </el-col>
      </el-row>

      <el-table :data="permissionList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="权限名称" prop="name"></el-table-column>
        <el-table-column label="权限路径" prop="url"></el-table-column>
        <el-table-column label="权限类型">
          <template slot-scope="sc">{{sc.row.urlType==1?'菜单权限':'接口权限'}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini"  @click="editPermissionDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6, 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </el-card>

    <div>
      <!--修改菜单-->
      <el-dialog title="修改权限" :visible.sync="editPermissionFormVisible" :close-on-click-modal="false">
        <el-form ref="editPermissionForm" :rules="editPermissionRules" :model="editPermission" label-width="150px" size="mini">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="editPermission.name"></el-input>
          </el-form-item>
          <el-form-item label="权限URL">
            <el-input v-model="editPermission.url"></el-input>
          </el-form-item>
          <el-form-item label="权限类型" prop="urlType">
            <el-select v-model="editPermission.urlType" placeholder="请选择权限类型">
              <el-option label="菜单权限" value="1"></el-option>
              <el-option label="接口权限" value="-1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="父菜单" prop="parentId">
            <el-select v-model="editPermission.parentId"  placeholder="请选择父菜单">
              <el-option label="一级菜单" :value="-1"></el-option>
              <el-option v-for="p in parentMenus" :label="p.name" :value="p.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="editPermissionFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="modifyPernmission">确 定</el-button>
        </div>
      </el-dialog>

      <!--添加菜单-->
      <el-dialog title="修改权限" :visible.sync="addPermissionFormVisible" @close="closeAddPermissionForm" :close-on-click-modal="false">
        <el-form ref="addPermissionForm" :rules="addPermissionRules" :model="addPermission" label-width="150px" size="mini">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="addPermission.name"></el-input>
          </el-form-item>
          <el-form-item label="权限URL">
            <el-input v-model="addPermission.url"></el-input>
          </el-form-item>
          <el-form-item label="权限类型" prop="urlType">
            <el-select v-model="addPermission.urlType" placeholder="请选择权限类型">
              <el-option label="菜单权限" :value="1"></el-option>
              <el-option label="接口权限" :value="-1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="父菜单" prop="parentId">
            <el-select v-model="addPermission.parentId"  placeholder="请选择父菜单">
              <el-option label="一级菜单" :value="-1"></el-option>
              <el-option v-for="p in parentMenus" :label="p.name" :value="p.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button  @click="cancelPermissionForm">取 消</el-button>
          <el-button type="primary" @click="addPermissionForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editPermissionFormVisible:false,
      addPermissionFormVisible:false,
      pageNum: 1,
      pageSize: 3,
      permissionList: [],
      total: 0,
      pname: "", //权限名称
      urlTypeDesc: "菜单权限",
      editPermission:{
        id:0,
        name:'',
        url:'',
        urlType:1,
        parentId:-1,
        insertTime:''
      },
      editPermissionRules:{
        name:[
          {required:true,message:"名称不能为空",trigger:"blur"}
        ],
        urlType:[
          {required:true,message:"请选择菜单类型",trigger:"change"}
        ],
        parentId:[
          {required:true,message:"请选择父菜单",trigger:"change"}
        ]
      },
      parentMenus:[],
      addPermission:{
        name:'',
        url:'',
        urlType:1,
        parentId:-1,
      },
      addPermissionRules:{
        name:[
          {required:true,message:"名称不能为空",trigger:"blur"}
        ],
        urlType:[
          {required:true,message:"请选择菜单类型",trigger:"change"}
        ],
        parentId:[
          {required:true,message:"请选择父菜单",trigger:"change"}
        ]
      }
    };
  },
  methods: {
    del(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("urlPermission/del/"+id)
        .then((data)=>{
          if (data.data.code == 200){
            this.$message({
              type: 'success',
              message: '删除成功!',
              duration:1000
            });
            this.searchPermission();
          }else {
            this.$message({
              type: 'error',
              message: data.data.msg ,
              duration:1000
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //保存修改的信息
    modifyPernmission(){
      this.$refs.editPermissionForm.validate((valid)=>{
        if (!valid) return ;

        this.$axios.put("urlPermission/modifyPermission",this.editPermission)
        .then((data)=>{
          if (data.data.code == 200){
            this.editPermissionFormVisible = false ;
            this.searchPermission() ;
            this.$message({
              message:"更新成功!" ,
              type:'success',
              duration:1000
            })
          }else {
            this.$message({
              message:data.data.msg ,
              type:'error',
              duration:1000
            })
          }
        });
      })
    },
    //打开修改对话框
    editPermissionDialog(obj){
      this.editPermissionFormVisible = true ;
      //this.editPermission = obj ;
      //根据id 查询一个对象
      this.$axios.get("urlPermission/getSinglePermission/"+obj.id)
      .then((data)=>{
        if (data.data.code == 200){
          this.editPermission = data.data.data ;
        }else {
          this.$message({
            message:data.data.msg ,
            type:'error',
            duration:1000
          })
        }
      })
    },
    //关闭对话框
    closeAddPermissionForm(){
      this.addPermissionFormVisible = false;
      //清除数据
      this.$refs.addPermissionForm.resetFields()
    },
    //取消添加对话框
    cancelPermissionForm(){
      this.addPermissionFormVisible = false;
      //清除数据
      this.$refs.addPermissionForm.resetFields()
    },
    //保存 权限
    addPermissionForm(){
      this.$refs.addPermissionForm.validate((valid)=>{
        if(!valid) {
          return ;
        }

        this.$axios.post("urlPermission/addPermission",this.addPermission)
        .then((data)=>{
          if (data.data.code == 200){
            this.addPermissionFormVisible = false ;
            this.$refs.addPermissionForm.resetFields();
            this.getParentMenu();  //加载一次父菜单
            this.$message({
              message:"添加权限成功!" ,
              type:'success',
              duration:1000
            })
            //访问  Home 路由
          }else {
            this.$message({
              message:data.data.msg ,
              type:'error',
              duration:1000
            })
          }
        })
      })
    },
    handleCurrentChange(now){
      this.pageNum = now ;
      this.searchPermission();
    },
    handleSizeChange(size){
      this.pageNum = 1;
      this.pageSize = size ;
      this.searchPermission();
    },
    search(){
      this.pageNum =1 ;
      this.searchPermission();
    },
    searchPermission(){
      this.$axios.get("/urlPermission/permissionList",{
        params:{  //键值对传参
          now:this.pageNum,
          size:this.pageSize,
          pname:this.pname
        }
      }).then((data)=>{
        if(data.data.code == 200){
          this.permissionList = data.data.data.records ;
          this.pageNum = data.data.data.current;
          this.pageSzie = data.data.data.size;
          this.total = data.data.data.total;
        }else {
          this.$message({
            message:data.data.msg ,
            type:'error',
            duration:1000
          })
        }
      })
    },
    getParentMenu(){
      this.$axios.get("/urlPermission/getParentMenu")
      .then((data)=>{
        if (data.data.code == 200){
          this.parentMenus = data.data.data ;
        }else {
          this.$message({
            message:data.data.msg ,
            type:'error',
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.searchPermission();
    this.getParentMenu();
  }
};
</script>
<style lang="less" scoped>
</style>